<template>
  <div class="container">
    <div class="container-content">
      <div class="card-container">
        <el-card
          :body-style="{ padding: '5px' }"
          shadow="never"
          v-for="group in data.tableData"
          :key="group.groupName"
        >
          <template #header>{{ group.groupName }} </template>
          <div style="display: flex; justify-content: start; padding: 10px">
            <div v-for="item in group.list" :key="item.id" class="group-item">
              <div class="group-item-title">
                <IconifyIconOnline
                  v-if="item.icon"
                  :icon="item.icon.name"
                  :style="{
                    background: item.icon.bgc,
                    color: item.icon.color
                  }"
                />
                {{ item.orderName }}
              </div>
              <div class="group-item-footer">
                <el-button
                  type="success"
                  size="small"
                  @click.stop="openViewFlowPhoto(item)"
                  >流程图</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  @click.stop="handleInitiateOrder(item)"
                >
                  发起
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <el-dialog
        v-model="data.showStartForm"
        width="70%"
        top="5vh"
        title="发起工单"
        append-to-body
      >
        <StartForm
          :order="data.order"
          :form="data.form"
          :readonly="false"
          :dialog="true"
          @close="data.showStartForm = false"
          @started="data.showStartForm = false"
          @saved="data.showStartForm = false"
        />
      </el-dialog>
      <el-dialog
        v-model="data.showFlowPic"
        width="60%"
        top="5vh"
        title="流程图"
        append-to-body
      >
        <FlowPhoto
          v-if="data.showFlowPic"
          :def-flow-id="data.order.defFlowId"
          @close="data.showFlowPic = false"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts" name="TaskOrderApply">
import * as orderFlow from "@/api/flow/order";
import StartForm from "../order/startForm.vue";
// 引入组件
const FlowPhoto = defineAsyncComponent(
  () => import("@/components/flow/flowPhoto.vue")
);
const data = reactive({
  tableData: [],
  showFlowPic: false,
  showStartForm: false,
  order: {
    orderId: "",
    defFlowId: "",
    flowKey: "",
    formId: ""
  },
  form: {
    id: "",
    formName: "",
    formInfo: null,
    printInfo: null,
    componentUrl: ""
  },
  queryForm: {
    status: "1",
    groupId: "ALL"
  }
});

const queryTableData = (params?: Object) => {
  if (params) {
    Object.assign(data.queryForm, {}, params);
  }
  orderFlow.queryGroup(data.queryForm).then(response => {
    data.tableData = response.data;
  });
};

const initDataOrder = item => {
  data.order.orderId = item.id;
  data.order.defFlowId = item.defFlowId;
  data.order.flowKey = item.flowKey;
  if (item.defFlow.flowForm) {
    data.order.formId = item.defFlow.flowForm.id;
    data.form.id = item.defFlow.flowForm.id;
    data.form.formName = item.defFlow.flowForm.formName;
    data.form.formInfo = item.defFlow.flowForm.formInfo;
    data.form.printInfo = item.defFlow.flowForm.printInfo;
    data.form.componentUrl = item.defFlow.flowForm.componentUrl;
  }
};

const handleInitiateOrder = async item => {
  if (!item) {
    data.showStartForm = false;
    return;
  }
  initDataOrder(item);
  data.showStartForm = true;
};

function openViewFlowPhoto(item) {
  data.order = {
    orderId: "",
    defFlowId: "",
    flowKey: "",
    formId: ""
  };
  initDataOrder(item);
  data.showFlowPic = true;
}

onMounted(() => {
  queryTableData();
});
</script>

<style lang="scss" scoped>
.card-content {
  height: 100px !important;
  min-height: 100px !important;
  overflow: auto;
}

.card-container {
  :deep(.el-card__header) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 40px;
    padding-right: $base-padding !important;
    padding-left: $base-padding !important;
    background-color: $base-border-color-extra-light;
    font-size: 16px;
  }

  .group-item {
    width: 230px;
    border: 1px solid var(--el-border-color);
    margin-right: 10px;
    padding: 10px;

    .group-item-title {
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }

    .group-item-footer {
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>
